// import { connect } from 'dva';
// import { useState, useEffect } from 'react';

// function ListBase({ employee, dispatch }) {
//   console.log(id);
//   const a = employee.map((user)=>(
//     // if(user.key===){

//     // }
//   ))
//   return (
//     <div>
//       <h1>Employee {id} 's Page</h1>
//       {/* <h1>姓 {params.firstName}</h1>
//       <h1>名 {params.lastName}</h1>
//       <h1>年龄 {params.age}</h1>
//       <h1>地址 {params.address}</h1> */}
//     </div>
//   );
// }

// export default connect(({ employee }) => ({ employee }))(ListBase);

import back1 from '../../image/2-2-2.png';
import { useState, useEffect } from 'react';
import { connect } from 'dva';

import '../index.css';

import { Form, Input, InputNumber, Button } from 'antd';
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
/* eslint-disable no-template-curly-in-string */

const validateMessages = {
  required: '${label} is required!',
  types: {
    email: '${label} is not a valid email!',
    number: '${label} is not a valid number!',
  },
  number: {
    range: '${label} must be between ${min} and ${max}',
  },
};

function List(match) {
  const { employee, dispatch } = match;
  const id = match.location.query.key;

  var info = {}; //当前详细信息页面数据
  console.log('list页面', id);
  console.log('list页面match', match);
  console.log('list页面employee', employee);

  employee.map((k, v) => {
    //console.log('k', k);
    if (k.key == id) {
      info = {
        ...k,
        key: Math.random(), //本来想添加新
        id: Math.random(),
      };
    }
  });
  if (typeof id == 'undefined') {
    info = {
      firstName: '',
      lastName: '',
      age: '',
      address: '',
      key: Math.random(), //本来想添加新
      id: Math.random(),
      name: '',
      tags: [],
    };
  }

  const [newFirstName, setNewFirstName] = useState(info.firstName);
  const [newLastName, setNewLastName] = useState(info.lastName);
  const [newAge, setNewAge] = useState(info.age);
  const [newAddress, setNewAddress] = useState(info.address);

  console.log('employee', employee);

  useEffect(() => {
    console.log('监控firstName更新1');
    console.log('newFirstName', newFirstName);
    dispatch({
      type: 'employee/getAll',
      employee: employee,
    });
  }, [newFirstName]);

  const onFinish = (values) => {
    console.log(values);
  };

  //采用mock将body内容添加到data.json
  function saveDataJson(allInfo) {
    dispatch({
      type: 'employee/postAll',
      payload: {
        employee: allInfo,
      },
    });
  }

  function submitData() {
    var allInfo = []; //所有数据

    employee.map((v, k) => {
      if (v.key == id) {
        console.log('newFirstName', newFirstName);
        allInfo.push({
          ...v,
          firstName: newFirstName,
          lastName: newLastName,
          age: newAge,
          address: newAddress,
        });
      } else {
        allInfo.push(v);
      }
      console.log('allInfo', allInfo);
    });

    console.log('id', id);
    //当前页面输入数据
    const newNData = {
      firstName: newFirstName,
      lastName: newLastName,
      age: newAge,
      address: newAddress,
      key: '' + Math.random(), //添加新
      id: '' + Math.random(),
      name: newFirstName + ' ' + newLastName,
      tags: [],
    };
    if (typeof id == 'undefined' || id == '') {
      //添加
      dispatch({
        type: 'employee/addEmployee',
        payload: {
          employee: newNData,
        },
      });
      saveDataJson(allInfo.concat(newNData));
    } else {
      //更新
      dispatch({
        type: 'employee/updateAll',
        payload: {
          employee: allInfo,
          //notFirst: true,
        },
      });
      saveDataJson(allInfo);
    }
  }

  return (
    //自己写的input
    <div className="back" style={{ width: '600px', margin: '0 auto' }}>
      <p />
      <span style={{ color: 'red' }}>*</span> FirstName:
      <Input
        type="text"
        onChange={(e) => setNewFirstName(e.target.value)}
        value={newFirstName}
      />
      <p />
      <span style={{ color: 'red' }}>*</span> LastName:
      <Input
        type="text"
        onChange={(e) => setNewLastName(e.target.value)}
        value={newLastName}
      />
      <p />
      Age:
      <Input
        type="text"
        onChange={(e) => setNewAge(e.target.value)}
        value={newAge}
      />
      <p />
      Address:
      <Input
        type="text"
        onChange={(e) => setNewAddress(e.target.value)}
        value={newAddress}
      />
      <p />
      <Button
        onClick={() => {
          if (newFirstName != '' && newLastName != '') {
            submitData();
          } else {
            alert('firstName和lastName为必填项！');
          }
        }}
      >
        提交数据
      </Button>
    </div>

    ////antdesign的input
    // <div className="back">
    //   <Form
    //     {...layout}
    //     name="nest-messages"
    //     onFinish={onFinish}
    //     validateMessages={validateMessages}
    //   >
    //     <Form.Item
    //       name={newFirstName}
    //       label="firstName"
    //       rules={[
    //         {
    //           required: true,
    //         },
    //       ]}
    //     >
    //       <Input
    //         type="text"
    //         onChange={(e) => setNewFirstName(e.target.value)}
    //         value={newFirstName}
    //       />
    //       <Input style={{ display: 'none' }} />
    //     </Form.Item>
    //     <Form.Item
    //       name={newLastName}
    //       label="newLastName"
    //       rules={[
    //         {
    //           required: true,
    //         },
    //       ]}
    //     >
    //       <Input
    //         type="text"
    //         onChange={(e) => setNewLastName(e.target.value)}
    //         value={newLastName}
    //       />
    //       <Input style={{ display: 'none' }} />
    //     </Form.Item>
    //     <Form.Item
    //       name={newAge}
    //       label="age"
    //       rules={[
    //         {
    //           type: 'number',
    //           min: 0,
    //           max: 150,
    //         },
    //       ]}
    //     >
    //       <Input
    //         type="text"
    //         onChange={(e) => setNewAge(e.target.value)}
    //         value={newAge}
    //       />
    //       <InputNumber style={{ display: 'none' }} />
    //     </Form.Item>
    //     <Form.Item name={newAddress} label="address">
    //       <Input
    //         type="text"
    //         onChange={(e) => setNewAddress(e.target.value)}
    //         value={newAddress}
    //       />
    //       <Input style={{ display: 'none' }} />
    //     </Form.Item>

    //     <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
    //       {/* <Button
    //         onClick={() => {
    //           submitData();
    //         }}
    //       >
    //         提交数据
    //       </Button> */}
    //       <Button
    //         type="primary"
    //         htmlType="submit"
    //         onClick={() => {
    //           if (newFirstName != '' && newLastName != '') {
    //             submitData();
    //           }
    //         }}
    //       >
    //         提交数据
    //       </Button>
    //     </Form.Item>
    //   </Form>
    // </div>
  );
}

export default connect(({ employee }) => ({ employee }))(List);
